<!DOCTYPE html>
<html lang="en">
<head>
   <title>ShoppintList</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
   
</head>
<body>

    <nav>
        <div class="nav-wrapper">
            <a class="brand-logo center">Shoppling list</a>

        </div>
    </nav>
    <ul></ul>
    <script>
        const electron = require('electron');
        const {ipcRenderer} = electron;
        const ul = document.querySelector('ul');
        //catch add item
        ipcRenderer.on('item:add', function(e, item){
            const li = document.createElement('li');
            const itemText = document.createTextNode(item);
            li.appendChild(itemText);
            ul.appendChild(li);
        });
        //clear items
        ipcRenderer.on('item:clear', function(){
            ul.innerHTML = '';
        });
        ul.addEventListener('dbclick',function(e){
            console.log("db click");
        });
       

    </script>
</body>
</html>